<template>
	<view class="body">
		<u-navbar title="地址选择" :placeholder="true"
			:rightText="navigationList.length > 2 && navigationList[navigationList.length-1].level != 'education' ? '确定' : ''"
			@rightClick="verifyClick()" @leftClick="backClick()"></u-navbar>
		<!-- <view class="search">
			<image src="@/static/public/search.png" mode="heightFix"></image>
			请输入要查询的城市
		</view> -->
		<view class="navigation">
			<span @click="navigationClick(0)">中华人民共和国/</span>
			<span v-for="(item,index) in navigationList" @click="navigationClick(index+1)">
				{{item.name}}/
			</span>
		</view>
		<view scroll-y="true" class="list">
			<view v-for="(item,index) in regionList" @click="regionClick(item)">
				<view>{{item.name}}</view>
				<view>
					<image src="@/static/map/right_arrow.png" mode="heightFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		rear
	} from '@/config/api.js';

	export default {
		data() {
			return {
				regionList: [],
				keywords: 1,
				navigationList: [],
				onCilck: true,
			}
		},
		methods: {
			getRegion() {
				this.regionList = [];
				uni.request({
					url: rear + "/region/getRegionByParentId",
					method: 'GET',
					data: {
						parentId: this.keywords
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.regionList = res.data.data
							this.onCilck = true;
						}
					}
				});
			},
			regionClick(item) {
				if (this.onCilck) {
					this.onCilck = false;
					this.navigationList.push(item);
					uni.request({
						url: rear + "/region/getTotalByParentId",
						method: 'GET',
						data: {
							parentId: item.id
						},
						success: (total) => {
							if (total.data.code == 200) {
								if (total.data.data > 0) {
									this.keywords = item.id;
									this.getRegion();
								} else {
									this.submit()
								}
							} else {
								this.onCilck = true;
							}
						}
					})
				}
			},
			submit() {
				const region = this.navigationList[this.navigationList.length - 1];
				let fullname = "中华人民共和国";
				for (var i = 0; i < this.navigationList.length; i++) {
					fullname += this.navigationList[i].name;
				}

				let detailsName = "";
				detailsName = this.navigationList[0].name
				// if (this.navigationList.length > 3) {
				// 	detailsName =
				// 		this.navigationList[this.navigationList.length - 3].name + " " +
				// 		this.navigationList[this.navigationList.length - 2].name + " " + region.name;
				// } else if (this.navigationList.length > 2) {
				// 	detailsName = this.navigationList[this.navigationList.length - 2].name + " " + region.name;
				// } else {
				// 	detailsName = region.name;
				// }
				const city = {
					"name": region.name,
					"adcode": region.id,
					"detailsName": detailsName,
					"fullname": fullname,
					"adcodeList": region.ancestors,
					"longitude": region.center[0],
					"latitude": region.center[1]
				}
				let user = uni.getStorageSync('user')
				uni.request({
					url: rear + "/user/editUser",
					method: "POST",
					data: {
						id: user.id,
						city: JSON.stringify(city)
					},
					success(res) {
						if (res.data.data) {
							user.city = city;
							uni.removeStorageSync('user');
							uni.setStorageSync('user', user);
							uni.showToast({
								title: '地址修改成功！',
								icon: 'none',
								duration: 2000
							});
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.showToast({
								title: '地址修改失败！',
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
			},
			verifyClick() {
				console.log(111)
				if (this.navigationList.length > 2 && this.navigationList[2].level != 'education') {
					this.submit();
				}
			},
			backClick() {
				if (this.onCilck) {
					this.onCilck = false;
					if (this.navigationList.length == 0) {
						uni.navigateBack({
							delta: 1
						});
					} else {
						if (this.navigationList.length == 1) {
							this.navigationList = [];
							this.keywords = 1;

						} else {
							this.navigationList = this.navigationList.slice(0, this.navigationList.length - 1)
							this.keywords = this.navigationList[this.navigationList.length - 1].id;
						}
						this.getRegion();
					}
				}
			},
			navigationClick(index) {
				if (this.onCilck && index != this.navigationList.length) {
					this.onCilck = false;
					if (index == 0) {
						this.navigationList = [];
						this.keywords = 1;
					} else {
						this.keywords = this.navigationList[index - 1].id;
						this.navigationList = this.navigationList.slice(0, index);
					}
					this.getRegion();
				}
			}
		},
		onLoad() {
			this.getRegion();
		}
	}
</script>
<style lang="scss">
	.body {
		height: 100vh;
		background-color: #FDFBF9;
		display: flex;
		flex-direction: column;

		.search {
			margin: 3vw;
			height: 10vw;
			background-color: #F2F2F2;
			border-radius: 5vw;
			line-height: 10vw;
			padding-left: 3vw;
			color: #666666;

			image {
				vertical-align: -1.3vw;
				height: 6vw;
			}
		}

		.navigation {
			padding: 3vw 3vw 3vw 3vw;
			color: #666666;
			font-size: 4vw;
		}

		.list {
			overflow-y: auto;
			flex-grow: 4;
			background-color: #FFFFFF;

			>view:nth-of-type(1) {
				border-top: 0.1vw solid rgba(0, 0, 0, 0.1);
			}

			>view {
				display: flex;
				flex-wrap: wrap;
				padding: 3vw;
				border-bottom: 0.1vw solid rgba(0, 0, 0, 0.1);

				>view:nth-of-type(1) {
					width: 95%;
				}

				>view:nth-of-type(2) {
					width: 5%;
					text-align: right;

					image {
						height: 4vw;
					}
				}
			}
		}
	}
</style>